<template>
    <div>
        <ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:void(0)">
						<div class="mui-media-body">
							<h1>{{myItem.title}}</h1>
                            <p class='mui-ellipsis'>
							<span>评论时间：{{myItem.addedTime | formatTime('YYYY-MM-DD')}}</span>
                            <span>点击：{{myItem.click}}</span>
                            </p>
						</div>
					</a>
				</li>
		</ul>
        <p class="p_content">{{myItem.content}}</p>
        <br><br><br>
        <comment :id="id"></comment>
    </div>
</template>
<script>
import comment from './Comment.vue';
export default {
    data:function () {
        return{
            list:'',
            myItem:'',
            id:this.$route.params.id,
        }
    },
    methods:{},
    components: {
        "comment":comment,
    },
    created () {
        console.log(this.$route.params.id);
        this.$http.get('lib/interface2.json').then(function (res) {
            this.list = res.body.newslist;
            var result = this.list.filter(item=>{
                if(item.id == this.$route.params.id){
                    return true;
                }
            });
            this.myItem = result[0];
        });
    }
}
</script>
<style lang="scss" scoped>
.mui-media-body{
    h1{
        margin: 10px 0 20px 0;
        font-size: 24px;
        font-weight: 650;
        text-align: center;
    }
    .mui-ellipsis {
        display: flex;
        justify-content: space-between;
    }
    p{
        color: #539dee;
        font-size: 12px;
    }
}
.p_content{
    margin: 18px;
    text-indent: 28px;
}
</style>